<template>
  <div class="newsinfo-container">
    <h3 class="title">{{ newsinfo.title }}</h3>
    <p class="subtitle">
      <span>发表时间：{{ newsinfo.add_time | dateFormat }}</span>
      <span>点击：{{ newsinfo.click }}次</span>
    </p>
    <hr />
    <div class="content">{{ newsinfo.content }}</div>
    <!-- 评论子组件，向子组件传递ID-->
    <comment-box :id="this.id"></comment-box>
  </div>
</template>
<script>
  import { Toast } from 'mint-ui'
  //导入评论子组件
  import comment from '../subcomponents/comment.vue'
  export default {
    data() {
      return {
        id: this.$route.params.id, //将url传递过来的ID值赋值给id
        newsinfo: [], //初始化详情信息
      }
    },
    created() {
      this.getNewsInfo()
    },
    methods: {
      getNewsInfo() {
        //获取新闻列表
        this.$axios.get('./json/newslist.json').then((result) => {
          if (result.data.status === 0) {
            var messageList = result.data.message //获取所有新闻列表
            var index = messageList.findIndex((item) => {
              if (item.id == this.id) return true
            })
            this.newsinfo = messageList[index]
          } else {
            Toast('获取数据失败！')
          }
        })
      },
    },
    components: {
      //用来注册子组件的节点
      'comment-box': comment,
    },
  }
</script>
<style lang="scss" scoped>
  .newsinfo-container {
    padding: 0 4px;
    .title {
      font-size: 16px;
      text-align: center;
      margin: 15px 0;
      color: #ff5000;
    }
    .subtitle {
      font-size: 13px;
      color: #226aff;
      display: flex;
      justify-content: space-between;
    }

    .content {
      font-size: 12px;
      width-max: 100%;
    }
  }
</style>